<template>
	<view class="order">
		<view class="title">全部补贴产品展示</view>
		<view class="con_box">
			<view class="con_box_top">
				<view class="con_box_top_left">
					<view class="nick_name">欢迎你，{{info.shopCode}}</view>
					<view class="updata">每天更新</view>
				</view>
				<view class="all">总补贴库存统计：<text class="num">{{info.btTong+info.btBei+info.btXiang+info.btXtong+info.btMbao+info.btltong+info.btYlguan}}</text></view>
			</view>
			<view class="type">库存管理</view>
			<view class="type_box">
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btTong}}</view>
						<view>桶</view>
					</view>
					<view>
						<view class="btn" @click="toNum(0)">详情</view>
						<view class="btn" @click="shenhe(0)">提交</view>
					</view>
					
				</view>
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btBei}}</view>
						<view>水杯</view>
					</view>
					<view>
						<view class="btn" @click="toNum(1)">详情</view>
						<view class="btn" @click="shenhe(1)">提交</view>
					</view>
				</view>
			</view>
			<view class="type_box">
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btXiang}}</view>
						<view>箱</view>
					</view>
					<view>
						<view class="btn" @click="toNum(2)">详情</view>
						<view class="btn" @click="shenhe(2)">提交</view>
					</view>
					
				</view>
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btXtong}}</view>
						<view>循环桶</view>
					</view>
					<view>
						<view class="btn" @click="toNum(3)">详情</view>
						<view class="btn" @click="shenhe(3)">提交</view>
					</view>
				</view>
			</view>
			<view class="type_box">
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btMbao}}</view>
						<view>膜包水</view>
					</view>
					<view>
						<view class="btn" @click="toNum(4)">详情</view>
						<view class="btn" @click="shenhe(4)">提交</view>
					</view>
					
				</view>
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btltong}}</view>
						<view>5L桶</view>
					</view>
					<view>
						<view class="btn" @click="toNum(5)">详情</view>
						<view class="btn" @click="shenhe(5)">提交</view>
					</view>
				</view>
			</view>
			<view class="fahuo_box" >
				<view class="type_list" >
					<view class="type_list_left">
						<view class="num">{{info.btYlguan}}</view>
						<view>易拉罐</view>
					</view>
					<view>
						<view class="btn" @click="toNum(6)">详情</view>
						<view class="btn" @click="shenhe(6)">提交</view>
					</view>
					
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				id:0,
				userinfo:[]
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.userinfo=uni.getStorageSync('user');
			this.getinfo();
		},
		methods: {
			getinfo(){
				var that=this;
				this.$http.get('shop/getMyshop',{}).then(function (response) {
					that.info=response.data.data;
				}).catch(function (error) {
					console.log(error);
				});
			},
			// index == 4补贴水 5补贴水杯 6补贴酒水
			toNum:function(index){
				uni.navigateTo({
					url:'/pages/caiGouNum/caiGouNum?navType=' + index + '&type=2' + '&id=' + this.id
				})
			},
			shenhe:function(index){
				var that = this;
				uni.showModal({
				    title: '提交审核',
				    content: '确认提交审核吗？不可撤回',
				    success: function (res) {
				        if (res.confirm) {
				            that.$http.get('shop/addButie',{'id':that.id,'index':index}).
				            then(function (response) {
				            	that.getinfo();
				            }).catch(function (error) {
				            	console.log(error);
				            });
				        }
				    }
				});
			}
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.order{
		.con_box{
			padding: 40rpx 30rpx;
			background: linear-gradient(180deg, #d9e5ff 0%, #f6f6f6 100%);
			.fahuo_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: linear-gradient(90deg, #fff 80%, #dbe3ff 100%);
				border-radius: 20rpx;
				.fahuo_box_right{
					display: flex;
					align-items: center;
					.fahuo_box_right_left{
						.admin{
							text-align: right;
							padding: 6rpx 0;
							color: #333;
							font-size: 24rpx;
						}
						.month{
							text-align: right;
							color: #999;
							font-size: 24rpx;
						}
						.fahuo_box_right_left_top{
							display: flex;
							align-items: center;
							justify-content: flex-end;
							color: #999;
							font-size: 24rpx;
							.icon{
								margin-right: 10rpx;
								width: 20rpx;
								height: 20rpx;
							}
						}
					}
					.o_img{
						width: 128rpx;
						height: 118rpx;
					}
				}
				.type_list{
					padding: 30rpx 20rpx;
					background: #fff;
					width: 44%;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						margin-top: 10rpx;
						width: 130rpx;
						height: 62rpx;
						background: #6686f5;
						box-shadow: 0 3rpx 20rpx #6686f5;
						border-radius: 31rpx;
						color: #fff;
						font-size: 26rpx;
						text-align: center;
						line-height: 62rpx;
					}
					.type_list_left{
						width: 50%;
						text-align: center;
						font-size: 26rpx;
						.num{
							padding-bottom: 10rpx;
							font-size: 38rpx;
							color: #333;
						}
					}
				}
			}
			.type_box{
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.type_list{
					margin-bottom: 20rpx;
					padding: 30rpx 20rpx;
					background: #fff;
					width: 43%;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.btn{
						margin-top: 10rpx;
						width: 130rpx;
						height: 62rpx;
						background: #6686f5;
						box-shadow: 0 3rpx 20rpx #6686f5;
						border-radius: 31rpx;
						color: #fff;
						font-size: 26rpx;
						text-align: center;
						line-height: 62rpx;
					}
					.type_list_left{
						width: 50%;
						text-align: center;
						font-size: 26rpx;
						.num{
							padding-bottom: 10rpx;
							font-size: 38rpx;
							color: #333;
						}
					}
				}
			}
			.type{
				padding: 0 0 20rpx;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			.con_box_top{
				padding-bottom: 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.con_box_top_left{
					color: #333;
					.nick_name{
						font-size: 32rpx;
					}
					.updata{
						font-size: 24rpx;
					}
				}
				.all{
					color: #333;
					font-size: 32rpx;
					.num{
						font-size: 40rpx;
						font-weight: bold;
					}
				};
			}
		}
		.title{
			padding: 30rpx;
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
			background: linear-gradient(90deg, #accbee 0%, #e7f0fd 100%);
		}
	}
</style>
